From 80a109706033c6b07664b14850801a79bc7c0d69 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Tue, 22 Jul 2014 19:50:15 +0200 Subject: [PATCH] Adwaita: .needs-attention dark variant style --- gtk/resources/theme/Adwaita/_common.scss | 17 ++++++++---- gtk/resources/theme/Adwaita/_drawing.scss | 27 ++++++++++++------- .../theme/Adwaita/gtk-contained-dark.css | 6 ++--- gtk/resources/theme/Adwaita/gtk-contained.css | 2 +- 4 files changed, 34 insertions(+), 18 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index e639f01f51..df40179600 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -248,13 +248,16 @@ GtkLabel { * Buttons * ***********/ +// stuff for .needs-attention +$_dot_color: if($variant=='light', $selected_bg_color, + lighten($selected_bg_color,15%)); @keyframes needs_attention { from { //background-size: 0 0, 0 0; background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, - to($selected_bg_color), + to($_dot_color), to(transparent)); } to { @@ -267,6 +270,7 @@ GtkLabel { } } + .button { border-radius: 3px; transition: all 200ms ease-out; @@ -394,19 +398,22 @@ GtkLabel { &.needs-attention > GtkLabel, &.needs-attention > GtkImage { animation: needs_attention 150ms ease-in; + $_dot_shadow: _text_shadow_color(); + $_dot_shadow_r: if($variant=='light',0.5,0.45); background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, - to($selected_bg_color), + to($_dot_color), to(transparent)), -gtk-gradient(radial, center center, 0, - center center, 0.5, - to(white), + center center, $_dot_shadow_r, + to($_dot_shadow), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; - background-position: right 3px, right 4px; + @if $variant == 'light' { background-position: right 3px, right 4px; } + @else { background-position: right 3px, right 2px; } &:backdrop { background-size: 6px 6px, 0 0;} } &.needs-attention:active > GtkLabel, diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss index 3710b4c99e..d06bf7ee3b 100644 --- a/gtk/resources/theme/Adwaita/_drawing.scss +++ b/gtk/resources/theme/Adwaita/_drawing.scss @@ -93,6 +93,18 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on @function _border_color ($c) { @return darken($c,25%); } // colored buttons want the border form the base color +@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { +// +// calculate the color of text shadows +// +// $tc is the text color +// $bg is the background color +// + $_lbg: lightness($bg)/100%; + @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); } + @else { @return transparentize(black,$_lbg*0.8); } +} + @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { // // helper function for the text emboss effect @@ -102,18 +114,15 @@ $widget_edge: 0 1px $borders_edge; //outer hilight "used" on // TODO: this functions needs a way to deal with special cases // - $_lbg: lightness($bg)/100%; - - $_dark: transparentize(black,$_lbg*0.8); - $_bright: transparentize(white,1-$_lbg/($_lbg*1.3)); + $_shadow: _text_shadow_color($tc, $bg); - @if lightness($tc) < 50% { - text-shadow: 0 1px $_bright; - icon-shadow: 0 1px $_bright; + @if lightness($tc)<50% { + text-shadow: 0 1px $_shadow; + icon-shadow: 0 1px $_shadow; } @else { - text-shadow: 0 -1px $_dark; - icon-shadow: 0 -1px $_dark; + text-shadow: 0 -1px $_shadow; + icon-shadow: 0 -1px $_shadow; } } diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 48821dbe6a..dfe59d2490 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -258,7 +258,7 @@ ***********/ @keyframes needs_attention { from { - background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), to(transparent)); } + background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#3583d5), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)); } } @@ -505,10 +505,10 @@ padding: 3px 6px; } .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage { animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent)); + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; - background-position: right 3px, right 4px; } + background-position: right 3px, right 2px; } .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop { background-size: 6px 6px, 0 0; } .stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage { diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index 8037156815..e28d9400ec 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -497,7 +497,7 @@ padding: 3px 6px; } .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage { animation: needs_attention 150ms ease-in; - background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent)); + background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.76923)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } -- 2.30.2